<template>
  <div class="dashboard-container">

    <!-- 顶部操作栏 -->
    <div class="search">
      <el-form :inline="true" class="left">
        <el-form-item>
          <el-button type="primary" @click="handleAdd('create')" size="mini">
            <i class="el-icon-plus"></i>
            新增
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getData" size="mini">
            刷新
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 内容栏 -->
    <div class="body">
      <!-- 列表 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleAdd('update', row)">
              <i class="el-icon-edit-outline"></i>
              编辑
            </el-button>
            <!-- <el-button type="text" @click="handleDelete(row)" style="color: red;">
              <i class="el-icon-delete"></i>
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog 
      :visible="dialogVisible" 
      :title="dialogType == 'create' ? '新增' : '编辑'" 
      :close-on-click-modal="false"
      @close="dialogVisible=false"
      width="600px"
    >
      <el-form label-width="80px" ref="form" :rules="rules" :model="temp">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入" v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumGetList, enumUpdate } from '@/api/enum'
import { TARGET_TYPE_LIST } from '@/utils/common'

export default {
  name: 'StaffEnum',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      TARGET_TYPE_LIST,
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      params: {
        companyId: 1,
        pageCount: 10,
        pageIndex: 0,
        name: '',
        objectType: '', //类型案例枚举
      },
      list: [],
      dialogVisible: false,
      dialogType: 'create',
      temp: {
        name: '',
        description: ''
      },
      loading: false
    }
  },
  mounted() {
    this.params.objectType = this.$router.history.current.query.type;
    this.getData();
  },

  methods: {
    //删除
    handleDelete(row) {
      //根据row.id进行判断
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let params = JSON.parse(JSON.stringify(this.tempUpdate))
        params.items = params.items.filter(item =>item.id != row.id)
        await enumUpdate(params)
        this.getData();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //如果
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.dialogType == 'create') {
            let params = JSON.parse(JSON.stringify(this.tempUpdate))
            params.items.push(this.temp);
            await enumUpdate(params)
            this.$message.success('创建成功')
          } else {
            let params = JSON.parse(JSON.stringify(this.tempUpdate))
            params.items = params.items.map(item => {
              if (item.id == this.temp.id) {
                return this.temp
              } else {
                return item
              }
            })
            await enumUpdate(params)
            this.$message.success('修改成功')
          }
          this.getData();
          this.dialogVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 点击新增、编辑
    handleAdd(type, row) {
      this.dialogType = type;
      this.dialogVisible = true;
      if (type == 'create') {
        this.temp = {
          name: '',
          description: ''
        }
      } else {
        this.temp = row
      }
    },
    //加载列表数据
    async getData() {
      this.loading = true
      let data = await enumGetList(this.params)
      this.loading = false;
      this.tempUpdate = data.list[0];
      this.list = data.list[0].items;
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    position: relative;

    .right {
      position: absolute;
      right: 0;
      top: 0;
    }

    .page {
      padding: 20px 0;
      text-align: center;
    }
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>